<template>
<div class="w-full h-screen">
    <div class="text-h5">
        统计
    </div>
    <div class="w-full h-full m-auto grid grid-cols-3 gap-3">
        <div id="chart1" class="w-full shadow-md h-1/3">
        </div>
        <div id="chart2" class="w-full h-1/3 shadow-md">
        </div>
        <div id="chart3" class="w-full h-1/3 shadow-md">

        </div>
    </div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref ,onMounted} from 'vue'
import { getAllBlogs } from 'src/boot/blogs/blogs';
import { getOne } from 'src/boot/coments';
const blogs = ref([])
let checked = ref(0)
let unchecked = ref(0)

const comments = ref([])
let commentsChecked = ref(0)
let commentsUnchecked = ref(0)

onMounted(()=>{
    let myChart = echarts.init(document.getElementById('chart1'));
    let myChart2 = echarts.init(document.getElementById('chart2'));
 // 饼图
 const res1 = getAllBlogs().then(res => {
    blogs.value = res.data.data
    blogs.value.forEach(item => {
        if (item.vis === 1) {
            checked.value++
        }
        else{
            unchecked.value++
        }
    })
}).then(()=>{
    let option = {
        tooltip: {},
        legend: {
            data: ['已审核', '未审核']
        },
        series: [{
            name: '文章审核状态',
            type: 'pie',
            data: [
                { value: checked.value, name: '已审核' },
                { value: unchecked.value, name: '未审核' }
            ]
        }]
    };
    myChart.setOption(option);
})

const res2 = getOne({}).then(res=>{
    comments.value = res.data.data
    comments.value.forEach(item => {
        if (item.vis === 1) {
            commentsChecked.value++
        }
        else{
            commentsUnchecked.value++
        }
    })
}).then(()=>{
    let option2 = {
        tooltip: {},
        legend: {
            data: ['已审核', '未审核']
        },
        series: [{
            name: '评论审核状态',
            type: 'pie',
            data: [
                { value: commentsChecked.value, name: '已审核' },
                { value: commentsUnchecked.value, name: '未审核' }
            ]
        }]
    };
    myChart2.setOption(option2);
})

let chart3 = echarts.init(document.getElementById('chart3'));
Promise.all([res1,res2]).then(()=>{
    let option3 = {
        title: {
            text: '文章评论统计'
        },
        tooltip: {},
        legend: {
            data: ['总数']
        },
        xAxis: {
            data: ["文章", "评论"]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [blogs.value.length, comments.value.length]
        }]
    };
    chart3.setOption(option3);})

})



</script>